<script>
import mixin from './mixin'
export default {
    name:'RsMenuItem',
    inject: ['rootMenu'],
    mixins:[mixin],
    props:{
        enabled:{
            type:Boolean,
            default:true
        },
        type:{
            type:String,
            default:'text'
        },
        index:null
    },
    computed:{
        indexPath(){
            const path = [this.index];
            let parent = this.$parent;
            while (parent.$options.name !== 'RsMenu') {
                if (parent.index) {
                    path.unshift(parent.index);
                }
                parent = parent.$parent;
            }
            return path;
        }
    },
    mounted(){
        this.$parent.addMenuItem(this);
    },
    methods:{
        onItemClick(){
            this.rootMenu.closeMenu();
            this.rootMenu.$emit("itemClick",this.index,this.indexPath,this);
        }
    },
    render(){

        const { onEnterMenuItem,onLeaveMenuItem,onItemClick,type} = this;
        if( type ==='line' ){
            return(
                <div class="rs-menu-item h-line"></div>
            )
        }

        const cls = {
            'rs-menu-item':true,
            'disabled':this.enabled == false,
            'padding-left':(this.firstLevel && this.$slots.icon && !this.rootMenu.contextMenu )
        };
        const icon = this.$slots.icon?<div class="item-icon">{this.$slots.icon}</div>:'';
        return (

            <div class={cls} 
                on-mouseenter={(ev)=>{onEnterMenuItem(ev,this.rootMenu)}}
                on-mouseleave={(ev)=>{onLeaveMenuItem(ev,this.rootMenu)}}
                on-click={(ev)=>{onItemClick(ev)}}
            >
                {icon}
                <div class="item-text">{this.$slots.default}</div>
            </div>
        )
    }
}
</script>